<template>
  <view class="serach-box">
    <view class="search-top">
      <u--input
        prefixIcon="search"
        v-model="storeName"
        placeholder="请输入商家名称"
        clearable
        prefixIconStyle="font-size: 22px;color: #909399"
      ></u--input>
      <u-button @tap="getdataFun" text="搜索" type="primary"></u-button>
    </view>
    <view class="serach" v-if="dataArr && dataArr.length">
      <scroll-view
        class="scroll-box"
        :scroll-y="true"
        @scrolltolower="onReachBottom"
        lower-threshold="150"
      >
        <view class="text-area">
          <view
            class="item"
            v-for="(item, index) in dataArr"
            :key="index"
            @click="toPage(item)"
          >
            <view class="u-slot-title1">
              <u--image
                :src="wxImg + item.imgLogo"
                width="70px"
                height="70px"
                class="tab-img"
                v-if="item.imgLogo"
              ></u--image>
              <u--image
                :src="avatar"
                width="70px"
                height="70px"
                class="tab-img"
                v-else
              ></u--image>
            </view>
            <view class="u-slot-title2">
              <view class="left">
                <text class="tips1">
                  {{ formatStr(item.merchantName, 10) }}</text
                >
                <text class="tips2"
                  >距离{{ formatDistance(item.distance, "m") }}</text
                >
              </view>
              <view class="center">
                <view class="rate">
                  <u-rate
                    :count="5"
                    :gutter="0"
                    active-color="#f39d21"
                    inactive-color="#b2b2b2"
                    readonly
                    :value="item.totalScore"
                  ></u-rate>
                  <text class="score">{{ item.totalScore.toFixed(1) }}</text>
                </view>
                <text>{{ formatStr(item.sellerClassName, 5) }}</text>
                <text v-if="item.totalBrowsingCount">
                  曝光{{ item.totalBrowsingCount }}次
                </text>
              </view>

              <view class="right"
                ><view class="m-top2"
                  ><u-icon name="map"></u-icon>{{ item.merchantAddress }}</view
                ></view
              >
            </view>
          </view>
        </view>
        <view>
          <u-loadmore
            :status="status"
            :loading-text="loadingText"
            :loadmore-text="loadmoreText"
            :nomore-text="nomoreText"
          />
        </view>
      </scroll-view>
    </view>
    <view
      class="serach"
      v-else-if="dataArr && dataArr.length === 0 && showFlag"
    >
      <view class="no-data">暂无数据</view>
    </view>
  </view>
</template>

<script>
import {
  getStoreData,
  setStoreData,
  httpPost,
  httpGet,
  formatDistance,
  formatStr,
  bdMapToTxMap,
  txMapToBdMap,
} from "@/utils/http.js";
const avatar = require(`@/img/my/avatar1.jpg`);
const app = getApp();
const globalData = app.globalData;
const wxImg = globalData.wxImg;
const date = new Date();
const year = date.getFullYear();
const month =
  date.getMonth() + 1 > 9 ? date.getMonth() + 1 : "0" + (date.getMonth() + 1);
const date1 = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
export default {
  data() {
    return {
      avatar,
      formatStr,
      formatDistance,
      wxImg,
      showFlag: true,
      dataArr: [],
      totalPrice: "",
      storeName: "",
      status: "loadmore",
      loadingText: "努力加载中",
      loadmoreText: "",
      nomoreText: "",
      count: 0,
      listInfo: {
        pageNo: 1,
        pageSize: 10,
        pages: 0,
        total: 0,
      },
      getLocation: {
        latitude: 22.54286,
        longitude: 114.05956,
      },
    };
  },
  onLoad() {
    const _this = this;
    uni.showLoading({
      title: "获取定位中",
    });
    uni.getLocation({
      isHighAccuracy: true, // 开启地图精准定位
      type: "gcj02", // 地图类型写这个
      success(res) {
        console.log("resMap:", res);
        const latitude = res.latitude;
        const longitude = res.longitude;
        _this.getLocation.latitude = latitude;
        _this.getLocation.longitude = longitude;
        uni.hideLoading();
        setStoreData("getLocation", _this.getLocation);
      },
      fail: (err) => {
        // 获取定位失败
        uni.hideLoading();
        setStoreData("getLocation", _this.getLocation);
      },
    });
  },
  methods: {
    toPage(item) {
      uni.navigateTo({
        url:
          "/pagesB/pages/index/store-detail?id=" +
          item.id +
          "&score=" +
          item.totalScore,
      });
    },

    onReachBottom() {
      if (this.dataArr.length >= this.count) {
        this.status = "nomore";
        return;
      } else {
        this.status = "loading";
        this.listInfo.pageNo++;
        this.getdataFun();
      }
    },
    getdataFun() {
      const _this = this;
      if (this.listInfo.pageNo === 1) {
        this.dataArr = [];
      }
      if (!this.storeName) {
        uni.$u.toast("请输入商家名称");
        return;
      }
      this.nomoreText = "";
      httpPost("/api/sellerstore/list", {
        merchantAlias: this.storeName.trim(),
        pageNo: this.listInfo.pageNo,
        ...txMapToBdMap(this.getLocation.longitude, this.getLocation.latitude),
        pageSize: 10,
      })
        .then((res) => {
          const result = res.data;
          _this.count = result.count || 0;
          // _this.listInfo.pages = result.totalPage;
          _this.dataArr.push(...result.list);
          if (_this.dataArr.length >= _this.count) {
            _this.status = "nomore";
            _this.nomoreText = "没有更多了";
          } else {
            _this.status = "loading";
            _this.nomoreText = "";
          }
          _this.showFlag = true;
        })
        .catch((e) => {
          _this.showFlag = true;
        });
    },
  },
};
</script>

<style lang="scss">
.serach-box {
  .search-top {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 16px;
    width: 100vw;
    box-sizing: border-box;
    background: #fff;
    font-size: 14px;
    /deep/.u-input {
      flex: 1;
    }
    /deep/.u-button {
      margin-left: 8px;
      width: 66px !important;
      height: 36px !important;
    }
  }

  .serach {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f8f8f8;
    width: 100vw;
    min-height: 100vh;
    .no-data {
      width: 100%;
      color: #666;
      text-align: center;
      margin: 48px;
    }
    .total {
      width: 120px;
      height: 120px;
      display: flex;
      margin: 32px 0 16px 0;
      font-size: 14px;
      color: #fff;
      justify-content: center;
      align-content: center;
      background: linear-gradient(-90deg, #f90, #f60);
      box-shadow: 2px 2px 22px 1px rgba(247, 213, 62, 0.897);
      border-radius: 50%;
      .num {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .value {
          font-size: 16px;
          line-height: 30px;
        }
      }
    }
    .item {
      background: #fff;
      border-radius: 4px;
      margin-bottom: 16px;
      padding: 12px 8px;
      display: flex;
      .u-slot-title1 {
        width: 70px;
        min-width: 70px;
        height: 70px;
        border-radius: 4px;
        overflow: hidden;
        margin: 8px 0;
        margin-right: 8px;
      }
    }
    .text-area {
      width: calc(100vw - 32px);
      color: #333;
      font-size: 14px;
      margin: 16px;
      .tips2 {
        color: #f00;
        text-align: right;
      }
      .title {
        line-height: 30px;
        color: #666;
        margin-left: 16px;
      }
    }
    .u-slot-title1 {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      line-height: 40px;
    }
    .u-slot-title2 {
      display: flex;
      flex-direction: column;
      flex: 1;
      .left,
      .center,
      .right {
        justify-content: space-between;
        display: flex;
        font-size: 12px;
        margin: 4px 0;
        color: #666;
        .score {
          margin-left: 3px;
        }
        .m-top2 {
          display: flex;
          align-items: flex-start;
          /deep/.u-icon__icon {
            margin: 2px 6px 0 0;
          }
        }
      }
      .center {
        .rate {
          display: flex;
          align-items: center;
        }
      }
      .tips1 {
        font-size: 14px;
        color: #333;
      }
      .tips2 {
        color: #666;
        font-size: 12px;
      }
    }
    .total {
      width: 120px;
      height: 120px;
      display: flex;
      margin-top: 32px;
      font-size: 14px;
      color: #fff;
      justify-content: center;
      align-content: center;
      background: linear-gradient(-90deg, #f90, #f60);
      box-shadow: 2px 2px 22px 1px rgba(247, 213, 62, 0.897);
      border-radius: 50%;
      .num {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .value {
          font-size: 16px;
          line-height: 30px;
        }
      }
    }
  }
}
</style>
